<template>
  <div style="display: inline-block;width:30px;margin-left: 4px;" v-if="enableCustomQuery">
    <a-popover
      :trigger="trigger"
      arrow-point-at-center
      overlay-class-name="table-column-setting-popover"
      :auto-adjust-overflow="true"
      @visibleChange="visibleChange"
    >
      <template slot="title">
        <div class="table-column-setting-title">
          {{$t('m.components.title.customQueryTitle')}}
          <a href="#" @click="handSet" class="table-column-setting-reset">{{$t('m.common.button.setting')}}</a>
        </div>
      </template>
      <template slot="content">
        <div class="table-column-setting-list">
          <ul class="table-column-setting-list-item">
            <li
              class="table-column-setting-list-item-li"
              v-for="(item, index) in customQueryList"
              :key="index"
              :title="item.name"
            >
              <a href="#" @click="selectQuery(item)">{{item.name}}</a>
            </li>
          </ul>
        </div>
      </template>
      <a-icon  type="filter" :style="{fontSize: '16px'}" :title="$t('m.components.title.customQueryTitle')"/>
    </a-popover>
    <custom-query-view ref="ychCustomQuery"
                      :viewCode="viewCode"
                      :query-columns="queryColumns"
                      :dict-options="dictOptions"
                      :dict-options-flg="dictOptionsFlg"
                      :customQueryList="customQueryList"></custom-query-view>
  </div>
</template>

<script>
  import { getCustomVaueByTypeAndDataId } from '@/api/api'
  import CustomQueryView from './CustomQueryView'
  import YchConstant from "@/api/YchConstant";
  import { getAction } from '@/api/manage'
  export default {
    name: 'CustomQuerySelect',
    components: {
      CustomQueryView
    },
    props: {
      viewCode:String,
      // 触发方式
      trigger: {
        type: String,
        default: 'hover'
      },
      queryColumns: {
        type: Array,
        default: () => []
      },
      dictOptions: {
        type: Object,
        default: {}
      },
      dictOptionsFlg: Number,
    },
    data() {
      return {
        customQueryList:[],
        url:{
          querySysConfigByCodeUrl:YchConstant.PREFIX_SYSTEM+"/sysconfig/querySysConfigByCode?code=enable-custom-query"
        },
        enableCustomQuery:false
      }
    },
    created() {
      getAction(this.url.querySysConfigByCodeUrl).then((res) => {
        if (res.success) {
          if(res.result=='yes' || res.result == 'YES'){
            this.enableCustomQuery = true
            this.getCustomQuery()
          }else{
            this.enableCustomQuery = false
          }
        }else{
          this.enableCustomQuery = false
        }
      }).catch(() => {
        this.enableCustomQuery = false
      })
    },
    methods: {
      handSet(){
        this.$refs.ychCustomQuery.handSet()
      },
      visibleChange(visible){
        if(visible){
          this.getCustomQuery()
        }
      },
      getCustomQuery(){
        let params = {
          type: 'customQuery',
          dataId: this.viewCode
        };
        getCustomVaueByTypeAndDataId(params).then(res => {
          if (res.success && res.result.length > 0) {
            this.customQueryList = JSON.parse(res.result)
          }
        });
      },
      selectQuery(item){
        this.$emit('selectCustomQuery', item.queryConditon)
      },
    },
    watch: {
    },
  }
</script>

<style lang="less">
  .table-column-setting-popover .ant-popover-inner-content {
    max-height: 260px;
    overflow-y: auto;
    padding-left: 10px;
  }
  .table-column-setting-popover .ant-popover-inner-content::-webkit-scrollbar-thumb {
    border-width: 0 0 0 9px;
  }
  .table-column-setting-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
  }
  .table-column-setting-list {
    width: 160px;
    .table-column-setting-list-item {
      display: block;
      width: 100%;
      list-style: none;
      .table-column-setting-list-item-li {
        position: relative;
        width: 100%;
        height: 30px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
</style>
